<template slot-scope="scope">
    <div id="idtable1" class="app-container" style="width: 99%; overflow: hidden; background: #ffffff; display: block; margin-left: 1%">
        <el-tabs type="border-card">
            <!-- 项目站点匹配 -->
            <el-tab-pane >
                <span slot="label" class="tabPaneXmzd"><i class="el-icon-lx-home"> </i><font class="lableFont"> 项目站点匹配</font></span>
                <div style="height: 8px"></div>
                <el-input v-model="searchlx" placeholder="请输入项目名称" class="input_search"></el-input>&nbsp;&nbsp;
                <el-button type="primary" @click="topage()" class="bthSearch">搜索</el-button>
                <el-button plain @click="dels()" class="btnSearchAdv">高级查询</el-button>
                <el-button @click="getList()" class="bthNormal">新增</el-button>
                <el-button @click="getList()" class="bthNormal">刷新</el-button>
                <div style="height: 8px"></div>
                <div class="app-container">
                    <el-table
                        :data="listxmzd"
                        border
                        :row-style="{ height: '30px' }"                        
                        :header-cell-style="{ background: '#005ab5', color: 'black' }"
                        :row-class-name="rowClassName"
                        @selection-change="handleSectionChange"
                        style="font-size: 15px; font-family: microsoft yahei;color:black;"
                    >
                        <el-table-column type="selection" width="50px" align="center" header-align="center"></el-table-column>
                        <el-table-column label="序号" prop="xh" width="70px" align="center" header-align="center"></el-table-column>
                        <el-table-column
                            label="操作"
                            prop="cz"
                            width="100px"
                            align="left"
                            header-align="left"
                            style="vertical-align: bottom; text-align: left; height: 10%;"
                        >
                            <template slot-scope="scope" >
                                <router-link :to="{ path: '/supervision_clock/new_today_clocking', query: { id: scope.row.id } }" class="fontNormal">
                                    修改
                                </router-link>
                                <router-link :to="{ path: '/supervision_clock/new_today_clocking', query: { id: scope.row.id } }" class="fontNormal">
                                    删除
                                </router-link>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="项目代码"
                            prop="xmzdxmdm"
                            align="left"
                            header-align="left"
                        ></el-table-column>
                        <el-table-column
                            label="项目名称"
                            prop="xmzdxmmc"
                            align="left"
                            header-align="left"
                        ></el-table-column>
                        <el-table-column
                            label="项目类型"
                            prop="xmzdxmlx"
                            align="left"
                            header-align="left"
                        ></el-table-column>
                        <el-table-column
                            label="项目位置"
                            prop="xmzdxmwz"
                            align="left"
                            header-align="left"
                        ></el-table-column>
                        <el-table-column
                            label="打卡方"
                            prop="xmzddkf"
                            align="left"
                            header-align="left"
                        ></el-table-column>
                        <el-table-column
                            label="打卡人员"
                            prop="xmzddkry"
                            align="left"
                            header-align="left"
                        ></el-table-column>
                        <el-table-column
                            label="打卡时间"
                            prop="xmzddksj"
                            width="200px"
                            align="left"
                            header-align="left"
                        ></el-table-column>
                    </el-table>
                </div>
                <el-pagination
                    :current-page="page"
                    :page-size="limit"
                    :total="total"
                    style="padding: 30px 0;  text-align: center;"
                    background
                    layout="total, prev, pager, next, jumper"
                    @current-change="getList"
                />
            </el-tab-pane>

            <!-- 监控画面展示 -->
            <el-tab-pane >
                <span slot="label" class="tabPaneZd"><i class="el-icon-lx-home"> </i><font class="lableFont"> 站点信息录入</font></span>
            </el-tab-pane>

            <!-- 摄像头信息录入 -->
            <el-tab-pane >
                <span slot="label" class="tabPaneSxt"><i class="el-icon-lx-home"> </i><font class="lableFont"> 摄像头信息录入</font></span>
            </el-tab-pane>
        </el-tabs>
        <div class="footer" id="app-footer" style="
    float:right;">
    
        <i class="el-icon-s-help"></i>
        <i class="el-icon-microphone"></i>
        <i class="el-icon-turn-off-microphone"></i>
        <i class="el-icon-zoom-in"></i>
        <i class="el-icon-video-camera-solid"></i>
        <i class="el-icon-camera-solid"></i>
        &nbsp;
    </div>
    </div>
</template>

<script>
import $ from 'jquery'
export default {
    data() {
        return {
            listxmzd: [
                {
                    xmzdxmdm: 'XMDM项目代码',
                    xmzdxmmc: '桐庐县钟山乡中一村元子庵旱地改水田提升项目',
                    xmzdxmlx: '旱改水项目',
                    xmzdxmwz: '桐庐县钟山乡中一村元子庵',
                    xmzddkf: '监理单位',
                    xmzddkry: '彭建平',
                    xmzddksj: '2021-01-01 09:00:01'
                },
                {
                    xmzdxmdm: 'XMDM项目代码',
                    xmzdxmmc: '桐庐县钟山乡中一村元子庵旱地改水田提升项目',
                    xmzdxmlx: '旱改水项目',
                    xmzdxmwz: '桐庐县钟山乡中一村元子庵',
                    xmzddkf: '监理单位',
                    xmzddkry: '彭建平',
                    xmzddksj: '2021-01-01 09:00:01'
                },
                {
                    xmzdxmdm: 'XMDM项目代码',
                    xmzdxmmc: '桐庐县钟山乡中一村元子庵旱地改水田提升项目',
                    xmzdxmlx: '旱改水项目',
                    xmzdxmwz: '桐庐县钟山乡中一村元子庵',
                    xmzddkf: '监理单位',
                    xmzddkry: '彭建平',
                    xmzddksj: '2021-01-01 09:00:01'
                }
            ],
            page: 1,
            limit: 10,
            total: 0,
            courseQuery: {},
            tableChecked: [],
            tabledatas: [],
            searchlx: ''
        };
    },
    created() {
        setTimeout(function(){
            setPaginationFontSize();
        },100)
        this.getList();
    },
    methods: {
        rowClassName({ row, rowIndex }) {
            //row.xh = rowIndex + 1;
            row.xh = (this.page - 1) * 10 + 1 + rowIndex;
        },
        //跳转页面
        topage() {
            const { href } = this.$router.resolve({ path: '/document_form' });
            window.open(href, '_self');
        },
        //获取信息
        getList(page = 1) {
            this.page = page;
            information.getProjectInformation(this.page, this.limit).then((response) => {
                this.list = response.data.rows;
                this.total = response.data.total;
            });
        },
        //批量删除
        dels() {
            if (this.tableChecked.length == 0) {
                alert('请选择删除的项目');
            } else {
                var _this = this;
                _this
                    .$confirm('此操作将删除记录, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                    .then(() => {
                        //点击确定，执行then方法
                        //调用删除的方法
                        for (let i = 0; i < this.tableChecked.length; i++) {
                            information.deleteInformation(this.tableChecked[i].id);
                            this.getList();
                        }
                        this.badCodeSelection = [];
                    }); //点击取消，执行catch方法
            }
        },
        handleSectionChange(val) {
            this.tableChecked = val;
        }
    }
};
function setPaginationFontSize() {
    if ($('.el-pagination__total').css('font-size') == '13px'){
        $('.el-pagination__total').css('font-size', '15px');
        $('.el-pagination__jump').css('font-size', '15px');
    }else{
        setTimeout(function () {
            setPaginationFontSize();
        }, 100);
    }    
}
</script>

<style>
.footer{
font-size: 20px;
width: 100%;
position:fixed;
right:0px;
height: 2.5%;
bottom:0;
text-align: right;
background-image: url('../../../../assets/img/底图.png');
background-size: 100% 100%;
}
.el-table th {
    background-color: #e2e2e2 !important;
}
.el-table .cell {
    text-overflow: clip;
}
.input_search {
    width: 150px;
}
.divtitle {
    font-family: 微软雅黑;
    font-size: 25px;
    color: #356cb3;
}
.btnSearchAdv {
    border-color: #356cb3;
    color: #356cb3;
    font-size: 15px;
    font-family: 微软雅黑;
}
.bthSearch{
    background-color: #356cb3;
    font-size: 15px;
    font-family: 微软雅黑;
}
.bthNormal{
    border-color: #848484;
    font-size: 15px;
    font-family: 微软雅黑;
}
.el-tabs--border-card {
    border: 1px solid #ffffff;
}
.lableFont {
    font-size: 15px;
    font-family: 微软雅黑;
    color:black;
}

.tabPaneXm .el-icon-lx-home{
    background-image: url('../../../../assets/img/el-tab-pane-xm.png') !important;
    background-size: 100% 99%;
}
.tabPaneXm .el-icon-lx-home::before {
    visibility: hidden;
}

.tabPaneXmzd .el-icon-lx-home{
    background-image: url('../../../../assets/img/el-tab-pane-xmzd.png') !important;
    background-size: 100% 99%;
}
.tabPaneXmzd .el-icon-lx-home::before {
    visibility: hidden;
}

.tabPaneJk .el-icon-lx-home{
    background-image: url('../../../../assets/img/el-tab-pane-jkhm.png') !important;
    background-size: 100% 99%;
}
.tabPaneJk .el-icon-lx-home::before {
    visibility: hidden;
}
.fontNormal{
    color: #356cb3;
    font-size: 15px;
    font-family: 微软雅黑;
}
.pageNormal{
    padding: 30px 0; 
    text-align: center;
    font-size: 15px;
    font-family: 微软雅黑;
    color:black;
}

.el-pagination__total {
    color: #000000;
    font-family: 微软雅黑;
}
.el-pagination__jump {
    color: #000000;
    font-family: 微软雅黑;
}
</style>